<template>
  <div class="app-container">
    <el-dialog
      v-if="this.check_status==2"
      title="驳回理由"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%"
    >
      <p>很遗憾，您的审核未通过,</p>
      <div class="dialogtext">
        <span>{{ this.check_msg }}</span>, 请修改后再次提交
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">重新修改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="this.check_status==3&&this.update_status ==2"
      title="驳回理由"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="30%"
    >
      <p>很遗憾，您的审核未通过,</p>
      <div class="dialogtext">
        <span>{{ this.check_msg }}</span>, 请修改后再次提交
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">重新修改</el-button>
      </span>
    </el-dialog>
    <el-tabs v-model="activeName" style="padding-left:30px">
      <!-- 经营许可 -->
      <el-tab-pane label="经营许可" name="first">
        <div class="divBar" />
        <span v-if="this.check_status==1" class="serviceInfo">信息审核中...</span>
        <span v-if="this.check_status==3 && this.update_status == 1" class="serviceInfo">门店信息审核中...</span>
        <h5 class="titleInfo">企业/个人工商户信息</h5>

        <div class="title">
          <el-radio-group v-model="enp_type" :disabled="isSource">
            <el-radio :label="2">企业</el-radio>
            <el-radio :label="1">个人工商户信息</el-radio>
          </el-radio-group>
        </div>
        <el-form
          v-if="flag"
          ref="form"
          class="form"
          :rules="rules"
          :model="form"
          label-width="180px"
          :disabled="isSource"
        >
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" placeholder="请输入15、18位字母或数字" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" />
          </el-form-item>

          <el-form-item label="法定代表人" prop="enp_user">
            <el-input v-model="form.enp_user" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="营业执照截止时间" prop="enp_time_type">
            <el-radio-group v-model="form.enp_time_type">
              <el-radio :label="1">长期</el-radio>
              <el-radio :label="2">时间</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="form.enp_time_type == 2"
              v-model="form.enp_lose_time"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="请选择日期"
            />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              disabled
              :file-num="3"
              :file-list="fileList1"
              :size-number="4"
            />
            <b class="text">
              1.请上传清晰、完整、无遮挡物的营业执照图片
              <br>2.要求原件红章清晰，如为复印件需加盖公司公章
              <br>3.图片大小不能超过4M，图片格式为jpg、jpeg、png
            </b>
          </el-form-item>

          <el-form-item label="法人证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择" @change="IdCard">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="法人证件号" prop="user_number">
            <el-input v-model="form.user_number" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="法人证件照正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
            <p>上传证件正面</p>
          </el-form-item>
          <el-form-item label="证件照背面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
            <p class="msgText">上传证件背面</p>
          </el-form-item>
          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" @blur="bankCard" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" @blur="bankCard" />
          </el-form-item>

          <el-form-item>
            <el-button style="margin:30px 0" type="primary" @click="submitNext('form')">下一步</el-button>
          </el-form-item>
        </el-form>
        <el-form
          v-else
          ref="form"
          class="form"
          :rules="rules"
          :model="form"
          :disabled="isSource"
          label-width="180px"
        >
          <el-form-item label="营业执照类型" prop="enp_code_type">
            <el-radio-group v-model="form.enp_code_type">
              <el-radio :label="1">营业执照注册号</el-radio>
              <el-radio :label="2">统一社会信用代码</el-radio>
            </el-radio-group>
            <el-input v-model="form.enp_code" placeholder="请输入15、18位字母或数字" />
          </el-form-item>

          <el-form-item label="经营者" prop="enp_user">
            <el-input v-model="form.enp_user" placeholder="请输入经营者姓名" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="企业名称" prop="enp_title">
            <el-input v-model="form.enp_title" placeholder="请输入营业执照名称" />
          </el-form-item>

          <el-form-item label="营业执照照片" prop="enp_img">
            <newUpload
              ref="uploadImg1"
              :file-num="3"
              :file-list="fileList1"
              disabled
              :size-number="4"
            />
            <b class="text">
              1.请上传清晰、完整、无遮挡物的营业执照图片
              <br>2.要求原件红章清晰，如为复印件需加盖公司公章
              <br>3.图片大小不能超过4M，图片格式为jpg、jpeg、png
            </b>
          </el-form-item>

          <el-form-item label="证件类型" prop="user_type">
            <el-select v-model="form.user_type" placeholder="请选择" @change="IdCard">
              <el-option
                v-for="item in cardOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="证件号" prop="user_number">
            <el-input v-model="form.user_number" @blur="IdCard" />
          </el-form-item>

          <el-form-item label="证件照片正面" prop="user_front_img">
            <newUpload ref="uploadImg2" :file-num="1" :file-list="fileList2" :size-number="2" />
            <p class="msgText">上传证件正面</p>
          </el-form-item>

          <el-form-item label="证件照片反面" prop="user_verso_img">
            <newUpload ref="uploadImg3" :file-num="1" :file-list="fileList3" :size-number="2" />
            <p class="msgText">上传证件背面</p>
          </el-form-item>

          <div class="divBar" />
          <h5 class="titleInfo">银行卡信息</h5>

          <el-form-item label="开户名" prop="bank_user">
            <el-input v-model="form.bank_user" @blur="bankCard" />
          </el-form-item>
          <el-form-item label="开户行" prop="bank_name">
            <el-input v-model="form.bank_name" />
          </el-form-item>
          <el-form-item label="开户账号" prop="bank_num">
            <el-input v-model="form.bank_num" @blur="bankCard" />
          </el-form-item>

          <el-form-item>
            <el-button style="margin:30px 0" type="primary" @click="submitNext('form')">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 基本资料 -->
      <el-tab-pane label="基本资料" :disabled="!isSource " name="second">
        <div class="divBar" />
        <span v-if="this.check_status==1" class="serviceInfo">信息审核中...</span>
        <span v-if="this.check_status==3 && this.update_status == 1" class="serviceInfo">门店信息审核中...</span>

        <h5 class="titleInfo">基础信息</h5>
        <el-form
          ref="form4"
          class="form"
          :rules="rules4"
          :model="form4"
          :disabled="isSource"
          label-width="150px"
        >
          <el-row>
            <el-col :span="9">
              <el-form-item label="姓名" prop="legal_person">
                <el-input v-model="form4.legal_person" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人手机号" prop="recomend_phone">
                <el-input v-model="form4.recomend_phone" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="form4.phone" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="推荐人姓名" prop="recomend_user">
                <el-input v-model="form4.recomend_user" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form4.email" />
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="签约分公司" prop="company_name">
                <el-input v-model="form4.company_name" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="证件类型" prop="identity_type">
                <el-select v-model="form4.identity_type" placeholder="请选择">
                  <el-option
                    v-for="item in cardOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="签约身份" prop="level">
                <el-radio-group v-model="form4.level" disabled>
                  <el-radio :label="2">特约授权经销商</el-radio>
                  <el-radio :label="3">高级授权经销商</el-radio>
                  <el-radio :label="7">普通合伙人授权经销商</el-radio>
                  <el-radio :label="8">高级合伙人授权经销商</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="证件号" prop="identity">
                <el-input v-model="form4.identity" @blur="IdCard1" />
              </el-form-item>
            </el-col>

            <el-col :span="15">
              <el-form-item label="常驻地址" prop="daily_address">
                <el-cascader
                  v-model="form4.daily_address"
                  :options="twoOptions"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="证件照片正面" prop="identity_img">
                <newUpload ref="uploadImg4" :file-num="1" :file-list="fileList4" :size-number="2" />
                <p class="msgText">上传证件正面</p>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="收货地址" prop="goods_address">
                <el-input v-model="form4.goods_address" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="证件照片反面" prop="identity_back_img">
                <newUpload ref="uploadImg5" :file-num="1" :file-list="fileList5" :size-number="2" />
                <p class="msgText">上传证件背面</p>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="divBar" />
        <h5 class="titleInfo">门店信息</h5>
        <el-form
          ref="form1"
          class="form"
          :rules="rules1"
          :model="form1"
          label-width="150px"
          :disabled="isCheck"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店名称" prop="name">
                <el-input v-model="form1.name" :rows="1" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="门店分类" prop="cate_id">
            <!-- <el-cascader v-model="form1.cate_name" :options="shopCate"  /> -->
            <el-select v-model="form1.cate_id" placeholder="请选择">
              <el-option
                v-for="item in shopCate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="主营业务" prop="main_business">
            <el-cascader
              v-model="form1.main_business"
              :disabled="this.check_status == 3"
              :options="businessCate"
              :show-all-levels="false"
              @change="changeTabe"
            />

          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="门店详细地址" prop="address">
                <el-cascader v-model="selectedOptions" :options="options" @change="pcaList" />
                <el-input
                  v-model="form1.address"
                  type="textarea"
                  :rows="2"
                  style="margin:20px 0"
                  @blur="getLngLat"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-show="isShow" id="container" />
          <el-form-item label="营业电话" prop="business_phone_one">
            <el-input v-model="form1.business_phone_one" />
          </el-form-item>

          <el-form-item label="营业电话2" prop="business_phone_two">
            <el-input v-model="form1.business_phone_two" />
          </el-form-item>
          <el-row>
            <el-col :span="16">
              <el-form-item label="营业时间" prop="business_time">
                <el-time-picker
                  v-model="form1.business_time"
                  is-range
                  value-format="HH:mm"
                  align="center"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="门店公告" prop="desc">
                <el-input
                  v-model="form1.desc"
                  type="textarea"
                  :rows="5"
                  maxlength="200"
                  placeholder="门店公告内容不得小于10字且最多输入200字，门店公告会在门店中展现！"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-radio
              v-model="offensive"
              :label="3"
              @click.native.prevent="clickitem(3)"
            >我声明，此页面所填写内容均真实有效，特别是经营地址为店铺最新可联系到的地址。同时可以作为行政机关和司法机关送达法律文件的地址。</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button
              :disabled="btnDisable"
              style="margin:30px 0"
              type="primary"
              @click="submitCheck('form1','form4')"
            >提交审核</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 门店环境 -->
      <el-tab-pane label="门店环境" name="third">
        <shopPic />
      </el-tab-pane>

      <!-- 特色服务 -->
      <el-tab-pane label="特色服务" name="fourth">
        <shopTese />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import newUpload from '@/components/imgUpload/index'
import shopPic from '@/views/shopMessage/shoppic'
import shopTese from '@/views/shopMessage/shopTese'
import axios from 'axios'

import { getPro, getShopMsg, checkShop, getCate, getLat } from '@/api/shopMessage'

export default {
  components: { newUpload, shopPic, shopTese },
  data() {
    // 电话号验证
    var validateNum = (rule, value, callback) => {
      const number = /^((0\d{2,3}\d{7,8})|(1[3456789]\d{9}))$/
      // const phoneNumber = /^0?1[3|4|5|8][0-9]\d{8}$/
      if (!value) {
        callback(new Error('请输入电话号码'))
      } else if (!(number.test(value))) {
        callback(new Error('请输入正确电话号码'))
      } else {
        callback()
      }
    }
    // 身份证号验证
    var validateIdentity = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
      if (!value) {
        callback(new Error('请输入证件号'))
      } else if (this.form.user_type == 0 && !isIDCard.test(value)) {
        callback(new Error('请输入正确证件号'))
      } else {
        callback()
      }
    }
    var validateIdentity1 = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
      if (!value) {
        callback(new Error('请输入证件号'))
      } else if (this.form.user_type == 4 && !isIDCard.test(value)) {
        callback(new Error('请输入正确证件号'))
      } else if (this.form.user_type == 4 && !this.enpMsg) {
        callback(new Error('姓名与身份证件不一致，请重新输入'))
      } else {
        callback()
      }
    }
    var validateIdentity2 = (rule, value, callback) => {
      const isIDCard = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
      if (!value) {
        callback(new Error('请输入证件号'))
      } else if (this.form4.identity_type == 4 && !isIDCard.test(value)) {
        callback(new Error('请输入正确证件号'))
      } else if (this.form4.identity_type == 4 && !this.enpMsg1) {
        callback(new Error('姓名与身份证件不一致，请重新输入'))
      } else {
        callback()
      }
    }
    var validateBusType = (rule, value, callback) => {
      const Card = /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/
      if (!value) {
        callback(new Error('请选择营业执照类型'))
      } else if (!this.form.enp_code) {
        callback(new Error('请输入营业执照号或统一社会信用代码'))
      } else if (!Card.test(this.form.enp_code)) {
        callback(new Error('请输入正确的营业执照号或统一社会信用代码'))
      } else {
        callback()
      }
    }
    var provinceId = (rule, value, callback) => {
      if (!this.form1.province) {
        callback(new Error('请选择省市区'))
      } else if (this.form1.address == '') {
        callback(new Error('请输入详细地址'))
      } else {
        callback()
      }
    }
    var bankNnum = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入开户账号'))
      } else if (!this.banknum) {
        callback(new Error('开户名与开户账号信息不一致，请重新输入'))
      } else {
        callback()
      }
    }
    var enpLose = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请选择营业执照截止时间类型'))
      } else if (value == 2 && !this.form.enp_lose_time) {
        callback(new Error('请选择营业执照截止时间'))
      } else {
        callback()
      }
    }
    // 名称验证
    var projectName = (rule, value, callback) => {
      const reg1 = new RegExp("[`!@#$^&*|':;',.<>/?~！@#￥……&*——|‘；：”“'。，、？]")
      const reg2 = /(^\_)|(\__)|(\_+$)/
      const reg3 = /^\d+\d+\d$/
      if (!value) {
        callback(new Error('请输入名称'))
      } else if (reg1.test(value)) {
        callback(new Error('名称不能有特殊字符'))
      } else if (reg2.test(value)) {
        callback(new Error('名称首尾不能出现下划线'))
      } else if (reg3.test(value)) {
        callback(new Error('名称不能全为数字'))
      } else {
        callback()
      }
    }
    return {
      enpMsg: false,
      enpMsg1: false,
      check_status: '',
      update_status: '',
      source: '',
      check_msg: '',
      flag: true,
      offensive: '',
      dialogVisible: true,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      activeName: 'first',
      btnDisable: true,
      enp_type: 2,
      form: {
        user_type: '',
        enp_title: '',
        enp_code_type: 0,
        bank_num: '',
        bank_name: '',
        bank_user: '',
        enp_user: '',
        enp_time_type: '',
        enp_lose_time: '',
        user_number: '',
        enp_img: [],
        user_front_img: '',
        user_verso_img: ''
      },
      form1: {
        cate_id: '',
        name: '',
        address: '',
        business_phone_one: '',
        business_phone_two: '',
        business_time: [],
        main_business_id: '',
        main_business: [],
        lng: '',
        lat: ''
      },
      form4: {
        legal_person: '',
        email: '',
        phone: '',
        recomend_user: '',
        recomend_phone: '',
        level: 1,
        company_name: '',
        daily_address: [],
        goods_address: '',
        identity_img: '',
        identity_back_img: '',
        identity_type: '',
        identity: ''

      },
      address: '',
      // typeOption: [
      //   {
      //     value: 0,
      //     label: '大陆'
      //   },
      //   {
      //     value: 1,
      //     label: '香港来往大陆通行证'
      //   },
      //   {
      //     value: 2,
      //     label: '澳门来往大陆通行证'
      //   },
      //   {
      //     value: 3,
      //     label: '台湾来往大陆通行证'
      //   },
      //   {
      //     value: 4,
      //     label: '外籍'
      //   }
      // ],
      cardOption: [
        {
          value: 1,
          label: '港澳来往大陆通行证'
        },
        {
          value: 2,
          label: '台湾来往大陆通行证'
        },
        {
          value: 3,
          label: '护照'
        },
        {
          value: 4,
          label: '身份证'
        }
      ],
      options: [],
      shopCate: [],
      businessCate: [],
      twoOptions: [],
      selectedOptions: [],
      rules: {
        enp_code_type: [{ required: true, validator: validateBusType }],
        enp_title: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        enp_user: [
          { required: true, message: '请输入法定代表人', trigger: 'blur' }
        ],
        enp_time_type: [{ required: true, validator: enpLose, trigger: 'change' }],
        enp_img: [{ required: true, message: '请上传营业执照照片' }],
        user_type: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        user_number: [
          { required: true, validator: validateIdentity1, trigger: 'blur' }
        ],
        user_front_img: [{ required: true, message: '请上传证件正面' }],
        user_verso_img: [{ required: true, message: '请上传证件背面' }],
        bank_user: [
          { required: true, message: '请输入开户名', trigger: 'blur' }
        ],
        bank_name: [
          { required: true, message: '请输入开户行', trigger: 'blur' }
        ],
        bank_num: [
          { required: true, validator: bankNnum, trigger: 'blur' }
        ]
      },
      rules1: {
        name: [{ required: true, validator: projectName, trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '请输入1到20个字之间',
            trigger: 'blur'
          }
        ],
        cate_id: [
          { required: true, message: '请选择门店分类', trigger: 'change' }
        ],
        main_business: [
          { required: true, message: '请选择主营业务', trigger: 'change' }
        ],
        address: [
          { required: true, validator: provinceId, trigger: 'blur' }
        ],
        business_phone_one: [
          { required: true, validator: validateNum, trigger: 'blur' }
        ],
        // business_phone_two: [
        //   { required: true, validator: validateNum, trigger: "blur" }
        // ],
        business_time: [{ required: true, message: '请选择营业时间' }],
        desc: [
          {
            min: 10,
            max: 200,
            message: '请输入10到200个字符之间',
            trigger: 'blur'
          }
        ]
      },
      rules4: {
        legal_person: [
          // { required: true, message: "请输入姓名", trigger: "blur" }
        ],
        identity_type: [{ required: true, message: '请选择证件类型' }],
        identity: [
          { required: true, validator: validateIdentity2, trigger: 'blur' }
        ],
        identity_img: [{ required: true, message: '请上传证件正面' }],
        identity_back_img: [{ required: true, message: '请上传证件背面' }],
        goods_address: [
          { required: true, message: '请输入收货地址', trigger: 'blur' },
          { min: 1, max: 30, message: '最多30个字符', trigger: 'blur' }
        ]
        // company_name: [{ required: true, message: "请输入签约分公司", trigger: "blur" }],
        // level: [{ required: true, message: "请选择签约身份"}],
        // daily_address: [
        //   { required: true, message: "请选择常住地址" }
        // ],
      },
      isShow: false, // 地图显示
      banknum: true // 银行信息验证
    }
  },
  computed: {
    isSource: function() {
      if (this.source == 3 && (this.check_status == 0 || this.check_status == 2)) {
        return false
      } else {
        return true
      }
    },

    isCheck: function() {
      // 表单是否可编辑
      if (this.check_status == 1) {
        return true
      } else if (this.check_status == 3 && this.update_status == 1) {
        return true
      } else {
        return false
      }
    }

  },
  watch: {
    enp_type(val) {
      if (val == 2) {
        this.flag = true
      } else {
        this.flag = false
      }
    },

    flag(e) {
      if (e) {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1)
          this.$refs.uploadImg2.getLength(this.fileList2)
          this.$refs.uploadImg3.getLength(this.fileList3)
          this.$refs.uploadImg4.getLength(this.fileList4)
          this.$refs.uploadImg5.getLength(this.fileList5)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.uploadImg1.getLength(this.fileList1)
          this.$refs.uploadImg2.getLength(this.fileList2)
          this.$refs.uploadImg3.getLength(this.fileList3)
          this.$refs.uploadImg4.getLength(this.fileList4)
          this.$refs.uploadImg5.getLength(this.fileList5)
        })
      }
    },

    options(val, oldval) {
      if (val) {
        let province = {}
        let city = {}
        let district = {}
        if (this.selectedOptions.length > 0) {
          province = this.options.find(item => {
            return item.value == this.selectedOptions[0]
          })
          city = province.children.find(item => {
            return item.value == this.selectedOptions[1]
          })
          district = city.children.find(item => {
            return item.value == this.selectedOptions[2]
          })
          this.address = province.label + city.label + district.label
        }
      }
    }
  },
  created() {
    this.getStatus()
    this.getArea()
    this.getShopCate()
    this.shuangdjShop()
  },
  mounted() {
    this.getMsg()
  },
  methods: {
    // 审核按钮
    clickitem(e) {
      e === this.offensive ? (this.offensive = '') : (this.offensive = e)
      if (this.offensive) {
        this.btnDisable = false
      }
    },
    // 省市区数据改变
    pcaList(value) {
      let e = this.selectedOptions
      e = value
      this.form1.province = e[0]
      this.form1.city = e[1]
      this.form1.district = e[2]
      let province = {}
      let city = {}
      let district = {}
      if (value.length > 0) {
        province = this.options.find(item => {
          return item.value == value[0]
        })
        city = province.children.find(item => {
          return item.value == value[1]
        })
        district = city.children.find(item => {
          return item.value == value[2]
        })
        this.address = province.label + city.label + district.label
      }
      this.getLngLat()
    },
    // 主营业务改变
    changeTabe(value) {
      this.form1.main_business_id = value[1]
    },
    // 获取信息
    getMsg() {
      getShopMsg().then(res => {
        // console.log(res);
        if (res.data.code == 200) {
          const ImgUrl = 'http://mmkapp.oss-cn-beijing.aliyuncs.com/'
          const data = res.data.data
          // 经营许可
          this.check_msg = data.check_msg
          this.update_status = data.update_status
          this.check_status = data.check_status
          sessionStorage.setItem('update_status', this.update_status)
          sessionStorage.setItem('check_status', this.check_status)
          this.enp_type = data.enp_type ? data.enp_type : 1
          this.form.bank_name = data.bank_name
          this.form.bank_num = data.bank_num
          this.form.bank_user = data.bank_user
          this.form.enp_user = data.enp_user
          this.form.enp_code_type = data.enp_code_type
          this.form.enp_code = data.enp_code
          this.form.enp_title = data.enp_title
          this.form.user_type = data.user_type
          this.form.user_number = data.user_number

          this.form.enp_time_type = data.enp_time_type
          this.form.enp_lose_time = data.enp_lose_time

          // 图片
          if (data.enp_img[0]) {
            const enp_img = data.enp_img.map(item => {
              return { url: ImgUrl + item }
            })
            this.fileList1 = enp_img
          }
          if (data.user_front_img) {
            this.fileList2 = [{ url: ImgUrl + data.user_front_img }]
          }
          if (data.user_verso_img) {
            this.fileList3 = [{ url: ImgUrl + data.user_verso_img }]
          }
          this.form.user_verso_img = data.user_verso_img
          this.form.user_front_img = data.user_front_img
          this.form.enp_img = data.enp_img
          this.$nextTick(() => {
            this.$refs.uploadImg1.getLength(this.fileList1)
            this.$refs.uploadImg2.getLength(this.fileList2)
            this.$refs.uploadImg3.getLength(this.fileList3)
          })

          // 个人信息
          this.form4.company_name = data.company_name
          this.form4.level = data.level
          this.form4.phone = data.phone
          this.form4.legal_person = data.legal_person
          this.form4.email = data.email
          this.form4.recomend_user = data.recomend_user
          this.form4.recomend_phone = data.recomend_phone
          this.form4.daily_address = data.daily_address
          this.form4.goods_address = data.goods_address
          this.form4.identity_type = data.identity_type
          if (data.identity_img) {
            this.fileList4 = [{ url: ImgUrl + data.identity_img }]
          }
          if (data.identity_back_img) {
            this.fileList5 = [{ url: ImgUrl + data.identity_back_img }]
          }
          this.form4.identity_img = data.identity_img
          this.form4.identity_back_img = data.identity_back_img
          this.form4.identity = data.identity
          this.$nextTick(() => {
            this.$refs.uploadImg4.getLength(this.fileList4)
            this.$refs.uploadImg5.getLength(this.fileList5)
          })

          // 门店信息
          this.form1.name = data.name
          this.form1.desc = data.desc
          this.form1.main_business_id = data.main_business_id
          this.form1.main_business = [Number(String(data.main_business_id).split('')[0]), data.main_business_id]
          this.form1.business_time = data.business_time.length > 1 ? data.business_time : ['00:00', '23:59']
          this.form1.business_phone_one = data.business_phone_one.split('-').join('')
          this.form1.business_phone_two = data.business_phone_two.split('-').join('')
          this.form1.cate_id = data.cate
          // this.form1.business_time = [data.business_time];
          this.form1.province = data.province
          this.form1.city = data.city
          this.form1.district = data.district
          this.form1.address = data.address
          if (data.lng) {
            this.getMap({ lng: data.lng, lat: data.lat })
          }
          this.form1.lng = data.lng
          this.form1.lat = data.lat
          if (data.province) {
            this.selectedOptions = [data.province, data.city, data.district]
          }
          this.$nextTick(() => {
            this.IdCard()
            this.IdCard1()
          })
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      }).catch(err => {
        this.errorStatus(err.message)
      })
    },
    // 跳转基本信息页
    submitNext(e) {
      this.form.enp_img = this.$refs.uploadImg1.submitUpload()
      this.form.user_front_img = this.$refs.uploadImg2.submitUpload()[0]
      this.form.user_verso_img = this.$refs.uploadImg3.submitUpload()[0]
      this.$refs.form.clearValidate('enp_img')
      this.$refs.form.clearValidate('user_front_img')
      this.$refs.form.clearValidate('user_verso_img')

      this.$refs[e].validate(valid => {
        if (valid) {
          this.activeName = 'second'
        } else {
          this.$message({
            message: '有必填项没填，不能提交咯',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 提交审核
    submitCheck(e,f) {
      this.form4.identity_img = this.$refs.uploadImg4.submitUpload()[0]
      this.form4.identity_back_img = this.$refs.uploadImg5.submitUpload()[0]
      this.$refs.form4.clearValidate('user_verso_img')
      this.$refs.form.clearValidate('user_front_img')
      if (this.source == 3 && (this.check_status == 0 || this.check_status == 2)) {
        this.$refs[f].validate(valid => {
          if (valid) {
            this.$refs[e].validate(valid => {
              if (valid) {
                const data = {
                  // source:Number(this.source),
                  // check_status:Number(this.check_status),
                  legal_person: this.form4.legal_person,
                  email: this.form4.email,
                  identity_img: this.form4.identity_img,
                  identity_back_img: this.form4.identity_back_img,
                  identity_type: this.form4.identity_type,
                  identity: this.form4.identity,
                  // recomend_user:this.form4.recomend_user,
                  // recomend_phone:this.form4.recomend_phone,
                  // company_id:this.form4.company_name,
                  // role_id:this.form4.level,
                  goods_address: this.form4.goods_address,
                  // province_id:this.form4.daily_address[0],
                  // city_id:this.form4.daily_address[1],

                  name: this.form1.name,
                  cate_id: this.form1.cate_id,
                  address: this.form1.address,
                  province: this.form1.province,
                  city: this.form1.city,
                  district: this.form1.district,
                  lng: this.form1.lng,
                  lat: this.form1.lat,
                  business_phone_one: this.form1.business_phone_one,
                  business_phone_two: this.form1.business_phone_two,
                  business_time: this.form1.business_time,
                  desc: this.form1.desc,
                  main_business_id: this.form1.main_business[1],

                  // 经营许可
                  enp_type: this.enp_type,
                  enp_user: this.form.enp_user,
                  enp_title: this.form.enp_title,
                  // enp_img:this.form.enp_img,
                  enp_code_type: this.form.enp_code_type,
                  enp_code: this.form.enp_code,
                  user_type: this.form.user_type,
                  user_number: this.form.user_number,
                  user_front_img: this.form.user_front_img,
                  user_verso_img: this.form.user_verso_img,
                  bank_user: this.form.bank_user,
                  bank_name: this.form.bank_name,
                  bank_num: this.form.bank_num,
                  enp_lose_time: this.form.enp_lose_time,
                  enp_time_type: this.form.enp_time_type
                }
                checkShop(data).then(res => {
                  if (res.data.code == 200) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    })
                    this.getMsg()
                    this.activeName = 'third'
                  } else {
                    this.$message({
                      message: res.data.msg,
                      type: 'warning'
                    })
                  }
                }).catch(err => {
                  this.errorStatus(err.msg)
                })
              } else {
                this.$message({
                  message: '有必填项没填，不能提交咯',
                  type: 'warning'
                })
                return false
              }
            })
          } else {
            this.$message({
              message: '基础信息有必填项没填，不能提交咯',
              type: 'warning'
            })
            return false
          }
        })
      } else {
        this.$refs[e].validate(valid => {
          if (valid) {
            const data = {
              source: Number(this.source),
              check_status: Number(this.check_status),
              name: this.form1.name,
              main_business_id: this.form1.main_business[1],
              cate_id: this.form1.cate_id,
              address: this.form1.address,
              province: this.form1.province,
              city: this.form1.city,
              district: this.form1.district,
              lng: this.form1.lng,
              lat: this.form1.lat,
              business_phone_one: this.form1.business_phone_one,
              business_phone_two: this.form1.business_phone_two,
              business_time: this.form1.business_time,
              desc: this.form1.desc
            }
            checkShop(data).then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.getMsg()
                this.activeName = 'third'
              } else {
                this.$message.error(res.data.msg)
              }
            }).catch(err => {
              // this.errorStatus(err);
            })
          } else {
            this.$message({
              message: '有必填项没填，不能提交咯',
              type: 'warning'
            })
            return false
          }
        })
      }
    },
    // 获取经纬度
    getLngLat() {
      if (this.address && this.form1.address) {
        const datas = {
          address: this.address + this.form1.address
        }
        getLat(datas).then(res => {
          this.form1.lng = res.data.lng
          this.form1.lat = res.data.lat
          this.getMap(res.data)
        }).catch(err => {
          // this.errorStatus(err.msg);
        })
      }
    },
    // 地图获取显示
    getMap(e) {
      // console.log(e)
      var map = new AMap.Map('container', {
        resizeEnable: true, // 是否监控地图容器尺寸变化
        zoom: 15, // 初始化地图层级
        center: [e.lng, e.lat] // 初始化地图中心点
      })
      var marker = new AMap.Marker({
        position: [e.lng, e.lat] // 位置
      })
      // AMap.plugin(['AMap.ToolBar',''],function () {
      //     map.addControl(new AMap.ToolBar())
      //     })
      this.isShow = true
      map.add(marker)
    },
    // 省市区
    getArea() {
      getPro().then(res => {
        const newArr = []
        // console.log(res)
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label
          })
          if (item1.children != null) {
            newArr[index]['children'] = []
            item1.children.forEach(item2 => {
              newArr[index]['children'].push({
                value: item2.value,
                label: item2.label
              })
            })
          }
        })
        this.options = res.data
        this.twoOptions = newArr

        if (this.selectedOptions) {
          this.pcaList(this.selectedOptions)
        }
      }).catch(err=>{
            this.errorStatus(err.message);
      })
    },

    // 获取门店分类
    getShopCate() {
      getCate().then(res => {
        const newArr = []
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label
          })
        })
        this.shopCate = newArr
      }).catch(err=>{
            this.errorStatus(err.message);
      })
    },
    // 身份证号验证
    IdCard() {
      if (this.form.user_type == 4) {
        this.enpMsg = false
        this.$refs.form.validateField('user_number')
        if (this.form.enp_user && this.form.user_number) {
          axios.post('http://basicts.ameimeika.com//api/user/idcard/auth', { realname: this.form.enp_user, idcard: this.form.user_number }).then(res => {
            // console.log(res)
            if (res.data.code == 200) {
              this.enpMsg = true
              this.$refs.form.validateField('user_number')
            } else {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          }).catch(err => {
            // this.errorStatus(err.msg);
          })
        }
      }
    },
    IdCard1() {
      if (this.form4.identity_type == 4) {
        this.enpMsg1 = false
        if (this.form4.legal_person && this.form4.identity) {
          axios.post('http://basicts.ameimeika.com//api/user/idcard/auth', { realname: this.form4.legal_person, idcard: this.form4.identity }).then(res => {
            // console.log(res)
            if (res.data.code == 200) {
              this.enpMsg1 = true
              this.$refs.form4.validateField('identity')
            } else {
              this.$message({
                message: res.data.msg,
                type: 'warning'
              })
            }
          })
        }
      }
    },

    // 银行信息验证
    bankCard() {
      if (this.form.bank_user && this.form.bank_num) {
        axios.post(`http://basicts.ameimeika.com/api/bank/card/info`, {
          realname: String(this.form.bank_user),
          card_num: String(this.form.bank_num)
        }).then(res => {
          // console.log(res)
          if (res.data.code == 200) {
            this.banknum = true
            this.$refs.form.validateField('bank_num')
          } else {
            this.banknum = false
            this.$refs.form.validateField('bank_num')
          }
        }).catch(err => {
          // this.errorStatus(err);
        })
      }
      // else{
      //       this.$message({
      //         message: res.data.msg,
      //         type: 'warning'
      //       })
      // }
    },
    // 获取爽到家主营业务
    shuangdjShop() {
      axios.post(`http://basicts.ameimeika.com/mmk/shuangdj/shop/business`).then(res => {
        // console.log(res)
        if (res.data.code == 0) {
          const newArr = []
          // console.log(res)
          res.data.data.dataList.forEach((item1, index) => {
            newArr.push({
              value: item1.mainBusinessId,
              label: item1.mainBusinessName
            })
            if (item1.mainBusinessList != null) {
              newArr[index]['children'] = []
              item1.mainBusinessList.forEach(item2 => {
                newArr[index]['children'].push({
                  value: item2.mainBusinessId,
                  label: item2.mainBusinessName
                })
              })
              this.businessCate = newArr
            }
          })
        } else {
        }
      }).catch(err => {
        // this.errorStatus(err);
      })
    },
    // 获取审核状态
    getStatus() {
      this.check_status = sessionStorage.getItem('check_status')
      this.update_status = sessionStorage.getItem('update_status')
      this.source = sessionStorage.getItem('source')
      // this.check_msg = sessionStorage.getItem("check_msg");
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, 'success')
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }

  }
}
</script>

<style scoped>
.app-container {
  padding: 20px !important;
}
#container {
  width: 350px;
  height: 350px;
  margin: 0 0 30px 150px;
  touch-action: none;
}
.text {
  color: #444;
  font-size: 12px;
  font-weight: 400;
}
.el-range-editor--medium.el-input__inner {
  width: 350px;
}
.title {
  margin-left: 150px;
  margin-bottom: 20px;
}
.titles {
  /* margin-left: 150px; */
  margin-bottom: 20px;
}
.msgText {
  width: 370px;
  /* height: 30px; */
  color: #444;
  font-weight: 400;
  /* line-height: 30px; */
}
/* 服务审核中信息样式 */
.serviceInfo {
  display: block;
  padding: 20px;
  font-size: 30px;
  color: orange;
}
.dialogtext {
  text-align: center;
  line-height: 36px;
  height: 36px;
}
</style>
